iT邦幫忙

2018 iT 邦幫忙鐵人賽
1
Modern Web

30天學習30套前端技術(2018年)系列 第 52

[十分鐘學習] goodshare.js - 社群分享按鈕大補帖

  • 分享至 

  • xImage
  •  

example1

快速建立像FacebookTwitter等社群分享按鈕,安裝容易、有廣泛文件和開發者支援,對SEO友善,許多自訂選項,新版本透過ES6打造簡潔原始碼以及高速度,並不再對jQuery有任何相依性,同時也放棄IE11以下版的支援。

GitHub Star: 268
Javascripting Overall: -
瀏覽器: ChromeFirefoxIE11+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- goodshare.js v4.1.2 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/goodshare.js/4.1.2/goodshare.min.js"></script>
    
  • npm

      $ npm install goodshare.js --save
    

《範例》

  • 分享至Twitter、Favebook、LinkedIn和Google+

      <!--
      	屬性設定[註1]
      	data-social: 設定分享平台
      	data-url: 設定連結位置`document.location.href`
      	data-title: 設定標題`document.title`
      	data-description: 設定描述`[name="description"]`
      	data-image: 設定ICON圖案`[rel="apple-touch-icon"]`
      -->
      <button data-social="twitter">Share this to Twitter</button>
      <button data-social="facebook">Share this to Facebook</button>
      <button data-social="linkedin">Share this to LinkedIn</button>
      <button data-social="googleplus">Google+</button>
      <!-- goodshare.js v4.1.2 -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/goodshare.js/4.1.2/goodshare.min.js"></script>
    

    [註1]

    屬性 描述

    data-social|設定分享平台(列表[註2])
    data-url|設定連結位置document.location.href
    data-title|設定標題document.title
    data-description|設定描述[name="description"]
    data-image|設定ICON圖案[rel="apple-touch-icon"]

    [註2]

    參數 描述

    vkontakte|Вконтакте
    facebook|Facebook
    odnoklassniki|Одноклассники
    moimir Мой|Мир@Mail.Ru
    googleplus|Google Plus
    linkedin|LinkedIn
    twitter|Twitter
    livejournal|LiveJournal
    tumblr|Tumblr
    blogger|Blogger
    pinterest|Pinterest
    digg|Digg
    evernote|Evernote
    reddit|Reddit
    delicious|Delicious
    stumbleupon|StumbleUpon
    pocket|Pocket
    surfingbird|Surfingbird
    liveinternet|LiveInternet
    buffer|Buffer
    instapaper|Instapaper
    xing|Xing
    wordpress|WordPress
    baidu|Baidu
    renren|RenRen
    weibo|Weibo


《延伸》

  1. Choose a language · goodshare.js — Useful modern JavaScript solution for share a link from your website to social networks or mobile messengers
  2. goodshare.js/README.md at master · koddr/goodshare.js

上一篇
[十分鐘學習] toastr - 簡易提示訊息
下一篇
[十分鐘學習] sketch.js - 極簡動畫繪製
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言